<template>
    <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="small"
            label-width="100px"
            :disabled="disabled"
    >
        <el-form-item label="分类" prop="type_id">
            <treeselect
                    v-model="formData.type_id"
                    :options="categoryList"
                    placeholder="请选择父级栏目"
                    :style="{ width: '100%' }"
                    :normalizer="normalizer"
                    :show-count="true"
                    :disabled="disabled"
            />
        </el-form-item>
        <el-form-item label="标题" prop="title">
            <el-input
                    v-model="formData.title"
                    placeholder="请选择标题"
                    clearable
                    :style="{ width: '100%' }"
            ></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="imgurl">
            <my-upload-image v-model="formData.imgurl" :limit="1"></my-upload-image>
        </el-form-item>
        <el-form-item label="banner图" prop="banner">
            <my-upload-image v-model="formData.banner" :limit="1"></my-upload-image>
        </el-form-item>
<!--        <el-form-item label="内容" prop="content">-->
<!--            <my-quill-editor  v-model="formData.content" placeholder="请输入内容"></my-quill-editor>-->
<!--        </el-form-item>-->
        <el-form-item label="内容" prop="content" class="jpbBox">
            <u-editor
                    ref='editor'
                    v-model="formData.content"
            ></u-editor>
            <el-button class="yjpbBtn" type="empty" plain size="small" @click="autoType">
                一键排版
            </el-button>
        </el-form-item>
        <el-dialog :visible.sync="previewVisible">
            <div class="img-bg">
                <img width="100%" :src="previewUrl" alt="" />
            </div>
        </el-dialog>
    </el-form>
</template>
<script>
    import news from "@/api/news/index";
    import Treeselect from "@riophae/vue-treeselect";
    // import the styles
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import XEUtils from 'xe-utils'
    import UEditor from "@/components/editor/UEditor";
    import MyUploadImage from "../../../components/Common/MyUploadImage";
    export default {
        components: {
            MyUploadImage,
            UEditor,
            Treeselect
        },
        props: {
            row: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            disabled:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                activeNames: [],
                categoryList: [],
                logoFileList: [],
                previewUrl: "",
                previewVisible: false,
                formData: {
                    title: undefined,
                    content: undefined,
                    type_id: undefined,
                    ctitle: undefined,
                    keywords: undefined,
                    description: undefined,
                    tag: undefined,
                    filename: undefined,
                    url: "",
                    no_order: 0,
                    com_ok: 0,
                    top_ok: 0,
                    is_allow: 0,
                    imgurl:undefined,
                    pub_time: new Date(),
                    banner:undefined,
                },
                rules: {
                    title: [
                        {
                            required: true,
                            message: "请输入标题",
                            trigger: "blur"
                        }
                    ],
                    content: [],
                    type_id: [
                        {
                            required: true,
                            message: "请选择栏目",
                            trigger: "change"
                        }
                    ],
                    ctitle: [],
                    keywords: [],
                    description: [],
                    tag: [],
                    filename: [],
                    url: [],
                    no_order: [
                        {
                            type: "number",
                            required: false,
                            message: "序号为数字",
                            trigger: "blur"
                        }
                    ],
                    com_ok: [],
                    top_ok: [],
                    is_allow: []
                },

            };
        },
        computed: {
            action() {
                return process.env.VUE_APP_BASE_API + "/api/upload_file/";
            }
        },
        watch: {},
        created() {
            if (this.row) {
                for (let o in this.formData) {
                    if(this.row[o] !=undefined){
                        this.formData[o] = this.row[o];
                        if (o == "imgurl") {
                            this.logoFileList.push({url:process.env.VUE_APP_BASE_API + this.formData[o]})
                        }
                    }

                }
            }
            this.getcategoryList();
        },
        mounted() {
        },
        methods: {
            autoType(){
                // eventBus.$emit("dosomething");
                // IE
                let dom = document.querySelector("div[title = '自动排版']").firstChild.firstChild;
                if (document.all) {
                    dom.click();
                }
                // 其它浏览器
                else {
                    var e = document.createEvent("MouseEvents");
                    e.initEvent("click", true, true);
                    dom.dispatchEvent(e);
                }
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children
                };
            },
            resetForm() {
                this.$refs["elForm"].resetFields();
            },
            getcategoryList() {
                news.getSimpleList().then(res => {
                        this.categoryList = XEUtils.toArrayTree(res.data,{strict: true, parentKey: 'parent', key: 'id', children: 'children'});
                });
            },
            submitForm(data,callback) {

                this.formData={...this.formData,...data};
                this.$refs["elForm"].validate(valid => {
                    if (!valid) return;
                    if (this.formData.pub_time == null) this.formData.pub_time = "";
                    if (this.row.id) {
                        news.editNews(this.row.id, this.formData).then(res => {
                                this.msgSuccess("修改成功!");
                                this.$emit("reloadList");
                            callback && callback();
                        });
                    } else {
                        news.addNews(this.formData).then(res => {
                                this.msgSuccess("添加成功!");
                                this.$emit("reloadList");
                            callback && callback();
                        });
                    }
                });

            }
        }
    };
</script>
<style lang="scss" scoped>
    .jpbBox{
        position: relative;
        .yjpbBtn{
            position: absolute;
            color: #0099E0;
            border: 1px solid #0099E0;
            bottom: -50px;
        }
    }
</style>
